Image captioning app with Gradio

Now that you understand the mechanism of image captioning, let's create a proper application with an intuitive interface. You can utilize Gradio, a tool provided by Hugging Face, for this purpose. To begin, you will have a brief introduction to Gradio. Following that, as an exercise, you will be tasked with implementing the image captioning application using the Gradio interface.

Quickstart Gradio: Creating a simple demo

Let's get familiar with Gradio by creating a simple app:

Still in the project directory, create a Python file and name it hello.py.

open terminal
New file

Open hello.py, copy and paste the following Python code and save the file.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  1. import gradio as gr
  2. def greet(name):
  3. return "Hello " + name + "!"
  4. demo = gr.Interface(fn=greet, inputs="text", outputs="text")
  5. demo.launch(server_name="0.0.0.0", server_port= 7860)

The above code creates a gradio.Interface called demo. It wraps the greet function with a simple text-to-text user interface that you could interact with.

The gradio.Interface class is initialized with 3 required parameters:

  • fn: the function to wrap a UI around
  • inputs: which component(s) to use for the input (e.g. “text”, “image” or “audio”)
  • outputs: which component(s) to use for the output (e.g. “text”, “image” or “label”)

The last line demo.launch() launches a server to serve your demo.

Launching the demo app

Now go back to the terminal and make sure that the my_env virtual environment name is displayed at the begining of the line.

Now run the following command to execute the Python script.

  1. 1
  1. python3 hello.py

As the Python code is served by local host, click the button below and you will be able to see the simple application you created. Feel free to play around with the input and output of the web app!

Click here to see the application:

You should see the following, here the name entered is bob:

Input and output

If you finish playing with the app and want to exit, press ctrl+c in the terminal and close the application tab.

You just had a first taste of the Gradio interface, it's easy right? If you wish to learn a little bit more about customization in Gradio, you are invited to take the guided project called Bring your Machine Learning model to life with Gradio. You can find it under Courses & Projects on cognitiveclass.ai!